<template>
  <view class="category">
    <TopSearch></TopSearch>
    <view class="main">
      <view class="menus">
        <view
          :class="['menusItem', index === current ? 'active' : '']"
          v-for="(item, index) in menus"
          :key="item.name"
          @click="changeMenus(index)"
          >{{ item }}</view
        >
      </view>
      <scroll-view class="goods" scroll-y :scroll-top="scrollTop">
        <view class="goodsGroup" v-for="item in goodsList" :key="item.cat_id">
          <view class="goodsGroupTitle">{{ item.cat_name }}</view>
          <view class="goodsGroupContent">
            <navigator
              :url="'/pages/goods_list/goods_list?cid=' + item1.cat_id"
              class="goodsItem"
              v-for="item1 in item.children"
              :key="item1.cat_id"
            >
              <image :src="item1.cat_icon"></image>
              <view class="goodsName">{{ item1.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 存放完整的分类数据
      categoryList: [],
      // 左侧导航栏的数据
      menus: [],
      // 右侧商品的数据
      goodsList: [],
      // 当前选中的左侧栏目的索引值
      current: 0,
      // 用于切换商品分类时让右侧回到最上面
      scrollTop: 0,
    };
  },
  onLoad() {
    // 判断是否有缓存
    // 获取缓存数据
    const cate = uni.getStorageSync("cate");

    if (!cate) {
      // 没有缓存，发送请求
      console.log("没有缓存，发送请求");
      this.getCate();
    } else {
      // 有缓存，判断缓存是否过期
      if (Date.now() - cate.time > 1000 * 10) {
        // 缓存过期，重新发送请求
        console.log("缓存过期，重新发送请求");
        this.getCate();
      } else {
        // 缓存没过期，使用缓存的数据
        console.log("缓存没过期，使用缓存的数据");
        this.setCategory(cate.data);
      }
    }
  },
  methods: {
    // 点击左侧导航栏，选中项切换样式
    changeMenus(index) {
      this.current = index;
      this.goodsList = this.categoryList[index].children;
      // 每次点击左侧导航栏，都给scrollTop设置一个无限接近于0且跟旧值不相同的值
      let scrolltop = Math.random() * Math.random() * Math.random();
      // 如果随机数还是跟旧值相同，就将随机数除以10，构造出不同的新值
      if (this.scrollTop === scrolltop) {
        scrolltop = scrolltop / 10;
      }
      this.scrollTop = scrolltop;
    },
    // 发送请求获取数据并将数据存入本地存储中
    async getCate() {
      const { message } = await uni.$u.http.get("/categories");
      this.setCategory(message);
    },
    // 处理获取到的数据
    async setCategory(msg) {
      this.categoryList = msg;
      console.log("分类数据", this.categoryList);
      // 构造左侧导航栏数组
      this.menus = this.categoryList.map((item) => (item = item.cat_name));
      console.log("左侧导航栏数据", this.menus);
      // 构造右侧商品数组
      this.goodsList = this.categoryList[this.current].children;
      console.log("右侧商品数据", this.goodsList);
      // 将数据存入本地存储中
      uni.setStorageSync("cate", {
        data: this.categoryList,
        time: Date.now(),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.category {
  // 小程序的100vh是去掉tabbar和顶部的高度的
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    display: flex;
    overflow: hidden;
    .menus {
      width: 182rpx;
      overflow: auto;
      background-color: #f3f3f3;
      .menusItem {
        height: 84rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666;
        font-size: 28rpx;
      }
      .active {
        color: #ea4350;
        border-left: 1rpx solid #ea4350;
      }
    }
    .goods {
      flex: 1;
      overflow: auto;
    }
  }
}
.goods {
  .goodsGroup {
    .goodsGroupTitle {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80rpx;
      font-size: 28rpx;
      color: #666;
      &::before {
        content: "/";
        margin-right: 30rpx;
      }
      &::after {
        content: "/";
        margin-left: 30rpx;
      }
    }
    .goodsGroupContent {
      display: flex;
      flex-wrap: wrap;
      .goodsItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 33.33%;
        image {
          width: 120rpx;
          height: 120rpx;
          background-color: #ccc;
        }
        .goodsName {
          font-size: 28rpx;
          color: #666;
        }
      }
    }
  }
}
</style>